<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #test{
            display: flex;
            flex-direction: row;/*设置主轴的方向*/
            justify-content: space-around;/*设置与主轴的对齐方式*/
            align-items: center;/*设置与副轴的对齐方式*/
        }
        .div1{
            font-size: 30px;
            margin-left: 100px;
        }
        .div7{
            margin-right: 100px;
        }
    </style>
</head>
<body>
<div id="test">
    <div class="div1">网易云音乐</div>
    <div class="div2">发现音乐</div>
    <div class="div3">我的音乐</div>
    <div class="div4">关注</div>
    <div class="div5">商城</div>
    <div class="div6">音乐人</div>
    <div class="div7">我的</div>


</div>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.main.js"></script>
<script type="text/javascript">

</script>
</body>
</html>